<template>
  <el-row :gutter="20" style="width: 90%;margin-right: auto;margin-left: auto">
    <el-col :span='14'>
      <el-card class='box-card' :style="{padding: '5px'}">
        <div slot='header' style='text-align: center;font-size: 16px'>考试科目：<strong>Java互联网分布式项目实战微服务开发</strong></div>
        <el-row>
          <el-col :span='16'>
            <div class='note-book' style="margin-left: 15%">
              <div class='note-content'>
                在分布式系统的构建之中，服务治理是类似血液一样的存在，一个好的服务治理平台可以大大降低协作开发的成本和整体的版本迭代效率。在服务治理之前，简单粗暴的RPC调用使用的点对点方式，完全通过人为进行配置操作决定，运维成本高（每次布置1套新的环境需要改一堆配置文件的IP），还容易出错，且整个系统运行期间的服务稳定性也无法很好的感知。
                关于服务治理网上相关的信息也是非常多，但是如何基于每个公司的当下情况去选择最合适的方案落地，是我们每个架构师或者Leader需要考虑的问题。所谓工欲善其事必先利其器，做好了服务治理，那么SOA化的推进会事半功倍，已经从技术层面天然支持了程序的水平扩展。.Neter社区下成熟的服务治理平台缺乏，我想这也是每个基于.Net技术栈公司面临的问题。
              </div>
            </div>
          </el-col>
          <el-col :span='4' :push='3'>
            <el-collapse >
              <el-collapse-item title='出题者：' name='1'>
                <div>蔡泳信</div>
              </el-collapse-item>
              <el-collapse-item title='考试科目：' name='2'>
                <el-tag size='small'
                        hit
                        type='danger'
                        effect='dark'>Java
                </el-tag>
                <el-tag size='small'
                        hit
                        type='danger'
                        effect='dark'>分布式
                </el-tag>
              </el-collapse-item>
              <el-collapse-item title='考试时间：' name='3'>
                <div>2022/03/15</div>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span='10'>
      <el-tabs type='border-card' v-model='activeName' @tab-click='handleClick'>
        <el-tab-pane name='details' label='知识图谱'>
          <div id="viz" style="height: 700px">

          </div>
        </el-tab-pane>
        <el-tab-pane name='menu' label='目录'>
        </el-tab-pane>
        <el-tab-pane name='share' label='分享'>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'JudgeInfo',
    components: {},
    data () {
      return {
        activeName: 'details'
      }
    },
    methods: {
      handleClick (tab, event) {
        switch (tab.name) {
          case 'details':
            // 获取数据
            break
          case 'menu':
            break
          case 'share':
            break
        }
      },
      draw () {
        var config = {
          container_id: 'viz',
          server_url: "bolt://175.178.60.127:7687",
          server_user: 'neo4j',
          server_password: 'password',
          labels: {
            "全栈Web开发 Python & VueCli": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            },
            "图云教育的英语": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            },
            "Java互联网分布式项目实战微服务开发": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            }
          },
          relationships: {
            "图云教育的英语_relation": {
              "thickness": "weight",
              "caption": "relationName"
            },
            "全栈Web开发 Python & VueCli_relation": {
              "thickness": "weight",
              "caption": "relationName"
            },
            "Java互联网分布式项目实战微服务开发_relation": {
              "thickness": "weight",
              "caption": "relationName"
            }
          },
          initial_cypher: "MATCH (n:`Java互联网分布式项目实战微服务开发` {isDelete:0})-[r]->(p {isDelete:0}) return *"
        }
        var viz = new NeoVis.default(config)
        viz.render()
      },
      readyNeovisJs () {
        let that = this
        let arr = ['./neovis.js']
        arr.map((item) => {
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.src = item
          document.getElementsByTagName('body')[0].appendChild(script)
          script.onload = function () {
            that.draw()
          }
        })
      },
    },
    created () {
      this.readyNeovisJs()
    },
    watch: {
      'activeName' (val) { //监听切换状态-计划单 // 注释，根据val的不同，跳转到不同
        let name
        switch (val) {
          case 'details':
            name = `user-space-record`
            break
          case 'share':
            name = `user-space-solution`
            break
          case 'menu':
            name = `user-space-blog`
            break
        }
        console.log(name)
        // 我的写法是每一个tab一个文件 如果不需要前进后退的话就不用push了
        this.$router.push({
          name: '',
          params: {}
        })
      }
    }
  }
</script>

<style scoped>
  p {
    margin: 0;
  }

  li, ul {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none outside none;
  }

  .note-book {
    background: #FEF9E7;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 0 4px #B2BABB;
  }

  .note-book .note-content {
    /* 实现横线效果 */
    line-height: 3rem;
    /*  这里需要根据 textarea 的内容进行滚动 */
    /*background: linear-gradient(transparent 95%, #424949 0) local;*/
    /* textarea样式修改 */
    width: 100%;
    resize: none;
    font-size: 1.1rem;
    font-family: inherit;
    outline: none;
    border: none;
    color: #2874A6;
    word-break: break-all;
    overflow-x: hidden;
  }
</style>
